{template 'app_common/header'}

<body>
<section class="g-flexview">
    <ul class="tab-nav">
        <li class="tab-nav-item work-order tab-active"><a href="javascript:;">售后工单</a>{if $is_read > 0}<span class="badge badge-danger"></span>{/if}</li>
        <li class="tab-nav-item common-question"><a href="javascript:;">常见问题</a></li>
    </ul>
    <div class="g-scrollview" id="list_binder">
        <div class="gd tab-content-item order_data" id="J_list" style="padding:0 .24rem;margin-top: .25rem;">
            <ul class="order_list"></ul>
        </div>

        <div class="tab-content-item category-list" style="margin-top: .01rem"></div>
    </div>
    <div class="creatGd">
        <a href="{php echo $this->createMobileUrl('order', array('act' => 'create'))}" class="btn-block btn-primary" style="margin-top: 0">创建工单</a>
        {template 'app_common/footer'}
    </div>
</section>

<script src="{KB_APP_JS}/jquery-3.2.1.min.js"></script>
<script src="{KB_APP_JS}/ydui.flexible.js"></script>
<script src="{KB_APP_JS}/ydui.js"></script>

<script type="text/javascript">
    !function () {
        var page = 1, pageSize = 7;
        $('#J_list').infiniteScroll({
            binder: '#list_binder',
            pageSize: pageSize,
            initLoad: true,
            loadingHtml: '<strong>加载中...</strong>', /* 当然也可以<img src="../img/loading.gif" /> */
            doneTxt: '',
            loadListFn: function () {
                var def = $.Deferred();

                /* 通过自定义的方法获取数据 */
                $.ajax({
                    url: "{php echo $this->createMobileUrl('index', array('act' => 'index'))}",
                    dataType: 'json',
                    data: {page: page, pageSize: pageSize},
                    success: function (data) {
                        if (data.total == 0) {
                            $('.order_list').append('<div style="text-align: center;color: #169bd5;margin-top: 30%;font-size: 15px;">亲爱的客户，您可以在此留言填写您的问题，<br>客服会尽量回复您哦~</div>');
                            $('.list-loading').html('');
                            return false;
                        }
                        var html = '';
                        if (data.order_list.length > 0) {
                            $.each(data.order_list, function (index, item) {
                                html += '<li>' +
                                    '<a href="' + item.url + '">' +
                                    '<div class="l">' +
                                    '<div class="title">【' + item.customer_status_name + '】 ' + item.content + '</div>' +
                                    '<div class="create-time">创建时间：' + item.add_time + '</div>' +
                                    '</div>' +
                                    '<div class="r cell-arrow"></div>' +
                                    '</a>' +
                                    (item.is_read == 0 ? '<div class="q_circle"></div>' : '') +
                                    '</li>';
                            });
                        }
                        $('.order_list').append(html);

                        /* 获取数据，并插入页面后，调用resole，并传入当前获取的记录列表集合 */
                        def.resolve(data.order_list);

                        /* 页码自增1 */
                        ++page;
                    }
                });
                return def.promise();
            }
        });
    }();

    $(function () {
        $('.tab-nav li').click(function () {
            var index=$(this).index();
            $(this).addClass('tab-active').siblings('li').removeClass('tab-active');
            $('.tab-content-item').eq(index).show().siblings('.tab-content-item').hide();
        })

        $('.common-question').click( function () {
            $.get("{php echo $this->createMobileUrl('index', array('act' => 'getCommonQuestion'))}", function (data) {
                if (data.total > 0) {
                    var html = '';
                    var url = "{php echo $this->createMobileUrl('index', array('act' => 'question'))}";
                    $.each(data.category_list, function (index, item) {
                        html += '<div class="m-cell" style="background-color:#f5f5f5;margin: 0">' +
                            '<a href="'+url+'&cat_id=' + item.cat_id + '">' +
                            '<div class="cell-item">' +
                            '<div class="cell-left" style="font-weight: bold;">' + item.cat_name + '</div>' +
                            '<div class="cell-right cell-arrow"></div>' +
                            '</div>' +
                            '</a>' +
                            '</div>';
                        if (item.child_list != null) {
                            html += '<div class="m-cell" style="margin-bottom: 0">';
                            $.each(item.child_list, function (i, v) {
                                html += '<a class="cell-item" href="' + url + '&cat_id=' + v.cat_id + '">' +
                                    '<div class="cell-left">&bull; ' + v.cat_name + '</div>' +
                                    '<div class="cell-right cell-arrow"></div>' +
                                    '</a>';
                            });
                            html += '</div>';
                        }
                    });
                    $('.category-list').html(html);
                } else {
                    return false;
                }
            });
        });
    });


</script>
</body>
</html>